<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>文本样式</h1>
    <h2>文本间距</h2>
    <h3>letter-spacing</h3>
    <div style="letter-spacing: 20px;">Lorem ipsum dolor sit amet consectetur 中科大。</div>
    <h3>word-spacing</h3>
    <div style="word-spacing: 20px;">Lorem ipsum dolor sit amet consectetur 中科大。</div>
    <h2>文本修饰 text-decoration</h2>
    <div style="text-decoration: overline">overline</div>
    <div style="text-decoration: line-through">line-through</div>
    <div style="text-decoration: underline">underline</div>
    <div>
        通过设置 text-decoration 的值为 none，去除元素自带的样式。
        <ul>
            <li>
                去除 a 的下划线 : 
                <a href="https:www.baidu.com" >去百度</a>
                <a href="https:www.baidu.com" style="text-decoration: none;">去百度</a>
            </li>
            <li>
                去除 &lt;ins&gt;的下划线: 
                <ins>普通ins</ins>
                <ins style="text-decoration: none;">处理后ins</ins>
            </li>
            <li>
                去除 &lt;del&gt; 的中划线:
                <del>普通 del</del>
                <del style="text-decoration: none;">处理后 del</del>
            </li>
        </ul>        
    </div>
    <div>text-decoration 也可以同时设置多个属性，属性间没有顺序要求</div>
    <div style="text-decoration: overline dashed red;">overline dashed red</div>
    <div style="text-decoration: wavy underline green;">overline dashed red</div>
    <div style="text-decoration: blue dotted line-through ;">overline dashed red</div>
    <h2>文本缩进 text-indent</h2>
    <p style="text-indent: 2em;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem corporis velit dolor exercitationem, earum nemo, itaque suscipit quos, laborum a corrupti blanditiis accusantium. Veritatis saepe ad explicabo ut incidunt esse reprehenderit fugit, quia aspernatur exercitationem harum, placeat cumque nesciunt sunt nam repellat temporibus accusamus adipisci. Odit, temporibus. Adipisci obcaecati cum aperiam veritatis ad, qui commodi temporibus eligendi ipsa. Ducimus debitis ex neque placeat tempore voluptatibus repellendus, ipsam maiores laborum sit enim eligendi quidem nulla totam expedita exercitationem cumque illum ea id! Laborum, nisi magni placeat suscipit sit eos similique quo. Doloribus id placeat cupiditate quis blanditiis unde laborum. Veniam, aut?</p>
    <h2>文本对齐 text-align</h2>
    <p style="text-align: left;">左对齐 left</p>
    <p style="text-align: center;">居中对齐 center</p>
    <p style="text-align: right;">右对齐 right</p>
</body>
</html>